<template>
  <div>
    <h2>欢迎光临</h2>
    <strong>苹果{{danjia}}斤，折扣{{zhekou}}</strong>
    <hr>
    <span>请输入要购买的斤数{{jinshu}}</span>
    <input type="text" v-model.number="jinshu">
    <button @click="btn">结账</button>
    <span>总价:{{zongjia}}元 折扣后{{zhehou}}元 省了{{jiesheng}}元</span>
  </div>
</template>

<script>
export default {
data(){
  return{
    danjia:10,
    zhekou:0.8,
    jinshu:0,
    zongjia:0,
    zhehou:0,
    jiesheng:0,
  }
},
methods: {
  btn() {
    this.zongjia=this.danjia*this.jinshu;
    this.zhehou=this.zongjia*this.zhekou;
    this.jiesheng=this.zongjia-this.zhehou;
  }
}
}
</script>

<style>

</style>